<template>
  <div class="v-tabs">
    <el-tabs :model-value="modelValue" @tab-change="handleTabChange">
      <slot></slot>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  modelValue: string; // 激活的tab名字
}>();

const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void;
}>();

const handleTabChange = (tabName: string) => {
  emit('update:modelValue', tabName);
}
</script>

<style lang="scss" scoped>
.v-tabs :deep(.el-tabs__header) {
  background-color: white;
  margin-bottom: var(--layout-padding);
}
.v-tabs :deep(.el-tabs__item) {
  padding-left: 20px!important;
  padding-right: 20px!important;
}

.v-tabs :deep(.el-tabs__nav-wrap::after) {
  display: none;
}
</style>
